<template>
  <el-table
      :data="orderItemList"
      border
      style="width: 100%"
      empty-text="暂无商品"
      :show-summary="showsummary"
      row-key="goods.id"
      height="675"
  >
    <el-table-column
        label="商品图片"
        width="140"
    >
      <template slot-scope="scope">
        <el-image
            style="width: 140px; height: 100px;margin: auto"
            :src="imgServerPath+scope.row.goods.image.url"
            fit="contain"
            :preview-src-list=[imgServerPath+scope.row.goods.image.url]
        ></el-image>
      </template>
    </el-table-column>
    <el-table-column
        prop="goods.name"
        label="商品名称"
        width="200">
    </el-table-column>
    <el-table-column
        label="成交价格（元）">
      <template slot-scope="scope">
        ￥ <span style="color: red">{{ scope.row.goods.nowprice }}</span>
      </template>
    </el-table-column>
    <el-table-column
        prop="num"
        label="商品数量">
    </el-table-column>
    <el-table-column
        label="成交总价（元）"
        prop="totalPrice">
    </el-table-column>
    <el-table-column
        label="评论">
      <template slot-scope="scope">

        <el-button v-if="scope.row.isComm == 0" @click="isComm(false)" type="danger" icon="el-icon-close"
                   circle></el-button>
        <el-button v-else @click="isComm(true)" type="success" icon="el-icon-check" circle></el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>

export default {
  props: {
    orderItemList: {
      type: Array
    }
  },
  data() {
    return {
      showsummary: true,
      imgServerPath: this.$GLOBAL.imgServerPath
    }
  },
  methods: {
    isComm(isComm) {
      if (isComm) {
        this.$message.info("该用户已经评论过了")
      } else {
        this.$message.info("该用户尚未评论")
      }
    }
  },
  watch: {
    orderItemList(newValue) {
      this.orderItemList = newValue
    }
  }
}
</script>

<style scoped>

</style>